<template>
  <!-- <div> -->
    <el-container style="height: 100%;">
      <el-aside width="17%" style="background-color: rgb(43, 46, 51);color:white">
        <div class="logo">
          <p style="color:#2DAFCB">HAPPY</p>
          <p>MMALL</p>
        </div>
        <el-menu
          :default-openeds="['1']"
          background-color="#2B2E33"
          text-color="#B5B5B5"
          active-text-color="white"
          :router="true"
        >
          <el-menu-item index="/homeon">
            <i class="el-icon-s-data"></i>
            <span slot="title">首页</span>
          </el-menu-item>
          <el-submenu index="/shopmanage">
            <template slot="title">
              <i class="el-icon-s-fold"></i>商品
            </template>
            <el-menu-item index="/shopmanage">商品管理</el-menu-item>
            <el-menu-item index="/shopcategory">品类管理</el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-circle-check"></i>订单
            </template>
            <el-menu-item index="/order">订单管理</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-user"></i>用户
            </template>
            <el-menu-item index="/userlist">用户列表</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header style="text-align: right; font-size: 12px; background:#eee;border-bottom:2px" >
          <el-dropdown  @command="handleCommand">
            <i class="el-icon-user-solid"></i>
            <span style="font-size:16px;color:#333">
              欢迎，admin
              <i class="el-icon-caret-bottom"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="a">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
         
        </el-header>
        <router-view></router-view>
      </el-container>
    </el-container>
  <!-- </div> -->
</template>

<script>
  export default {
    name : "Home",
    data() {
      // const item = {
      //   date: "2016-05-02",
      //   name: "王小虎",
      //   address: "上海市普陀区金沙江路 1518 弄"
      // };
      return {
      //   tableData: Array(20).fill(item)
      };
    },
    methods: {
      //退出登录回调
      handleCommand(command) {
        this.$router.push("/login");
      },
    }
  }
</script>

<style lang="scss" scoped>
  .el-header {
    background-color: white;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }
  .el-menu {
    border: none;
  }
  .el-menu-item {
    background: #17191b !important;
  }
  h5 {
    line-height: 56px;
  }
  .logo {
    font-size: 30px;
    font-weight: bold;
    line-height: 56px;
    padding-left: 20px;
    position: relative;
    > p:last-of-type {
      position: absolute;
      z-index: 6;
      top: 20px;
    }
  }
  .logo:hover {
    background: #17191b;
  }
  .el-menu-item.is-active {
    background-color: #2dafcb !important;
  }
</style>